<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/head :: header('桀骜的个人博客')"/>
    <th:block th:include="common/include :: editormd-css"/>
    <th:block th:include="common/include :: viewer-css"/>
    <!--分享功能插件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css">

    <link rel="stylesheet" href="/front/css/article.css">
    <link rel="stylesheet" href="/front/css/comment.css">
</head>
<body>
<div id="app">
    <div th:include="common/head :: nav('桀骜的个人博客')"></div>
    <!--页面主体-->
    <div id="main">
        <div class="am-container">
            <div class="am-g">
                <div class="am-u-sm-12 am-u-lg-12">
                    <div class="content">
                        <div class="article">
                            <div class="ja-article-top">
                                <article-top>
                                    <div class="article-title">
                                        <h1>[[${article.title}]]</h1>
                                    </div>
                                    <div class="article-info row">
                                        <div class="article-info article-info-type am-badge am-badge-success">
                                            [[${article.articleType == 'YC'?'原创':'转载'}]]
                                        </div>
                                        <div class="article-info article-info-publishDate">
                                            <i class="am-icon-calendar"><a class="articleCategoryColor"
                                                                           href="/archives?archive=' + data.publishDate + '">
                                                [[${#dates.format(article.releaseTime, 'yyyy-MM-dd')}]]
                                            </a></i>
                                        </div>
                                        <div class="article-info article-info-originalAuthor">
                                            <i class="am-icon-user"> [[${article.createBy}]]</i>
                                        </div>
                                        <div class="article-info article-info-categories">
                                            <i class="am-icon-folder"> <a class="articleCategoryColor"
                                                                          href="/categories?category=' + data.articleCategories + '">[[${article.catalogName}]]</a></i>
                                        </div>
                                    </div>
                                </article-top>
                                <div class="article-i-say">
                                    不逼自己一下，真的不知道自己有多大潜力。<span class="article-i-say-me">--- 桀骜</span>
                                </div>
                            </div>

                            <div class="article-content">
                                <div id="acticleView">
                                    <textarea style="display:none;" name="editormd-markdown-doc" id="mdText"></textarea>
                                </div>
                            </div>

                            <div class="ja-article-footer">
                                <div class="end-logo">
                                    <i class="am-icon-btn am-success am-icon-lg">完</i>
                                </div>
                                <div class="article-tags"></div>
                                <ul class="post-copyright">
                                    <li><strong>本文作者：</strong><span id="authorFooter">[[${article.createBy}]]</span>
                                    </li>
                                    <li><strong>原文链接：</strong><span id="urlFooter"><a
                                            th:href="@{${article.articleUrl}}"> [[${article.articleUrl}]]</a></span>
                                    </li>
                                </ul>
                            </div>
                            <hr>
                            <div class="two-article">
                                    <span class="article-last">
                                        <i class="am-icon-angle-left am-icon-sm"></i>&nbsp;&nbsp;<a class="lastAndNext"
                                                                                                    th:href="(${article.lastArticleId}==null)?@{#}:@{'/front/article/articleDetil?articleId='+${article.lastArticleId}}"> [[${article.lastArticleId==null?'无':article.lastArticleName}]] </a>
                                    </span>
                                <span class="article-next">
                                        <i class="am-icon-angle-right am-icon-sm"></i>&nbsp;&nbsp;<a class="lastAndNext"
                                                                                                     th:href="(${article.nextArticleId}==null)?@{#}:@{'/front/article/articleDetil?articleId='+${article.nextArticleId}}"> [[${article.nextArticleId==null?'无':article.nextArticleName}]] </a>
                                    </span>
                            </div>
                        </div>
                        <div class="other"></div>
                    </div>

                    <div class="comment">
                        <div class="comment-top">
                            <div class="comment-top-input" th:if="${#httpServletRequest.remoteUser}">
                                <textarea id="comment" placeholder="客官，来说两句吧..."></textarea>
                            </div>
                            <div class="comment-top-input" th:unless="${#httpServletRequest.remoteUser}">
                                <div class="goToLogin">
                                    &nbsp;&nbsp;&nbsp;<a id="toLogin" href="/front/login">登录</a>后才可以发表评论呦...
                                </div>
                            </div>
                            <div class="commentBtn">
                                <button id="commentBtn" type="button" class="am-btn am-btn-secondary">发表评论</button>
                            </div>
                        </div>
                        <div class="comment-bottom"></div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!--消息盒子+反馈-->
    <div th:include="common/other :: other"></div>
    <!--引入共有底部-->
    <div th:include="common/footer :: footer"></div>
</div>
<th:block th:include="common/include :: editormd-js"/>
<th:block th:include="common/include :: viewer-js"/>

<script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js"></script>
<script type="text/javascript" th:src="@{/front/js/redirect.js}"></script>
<script type="text/javascript" th:src="@{/front/js/all.js}"></script>

<script th:inline="javascript">
    var article = [[${article}]];
    $(document).ready(function () {
        //填充文章
        putArticle();
        //填充标签
        putArticletTags();
        //填充分享
        putLikeBtn();
        //填充图片放大效果
        putImg();
        //初始化评论
        initComment();


        //喜欢按钮
        $(".likeBtn").click(function () {
            var $this = $(this);
            $.ajax({
                type: 'get',
                url: '/front/article/articleLike',
                dataType: 'json',
                data: {
                    articleId: article.id
                },
                success: function (data) {
                    if (data.code == 0) {
                        $('.likesNum').find('span').html(article.likesNum + 1);
                        $('.likeBtn').css({
                            "background-color": "#EA6F5A",
                            "color": "white"
                        });
                        $('.likesNum').css({
                            "border-left": "1px solid white"
                        });
                        $('.likeHeart').find('i').removeClass("am-icon-heart-o");
                        $('.likeHeart').find('i').addClass("am-icon-heart");
                        $.tipsBox({
                            obj: $this,
                            str: "+1个喜欢"
                        });
                        niceIn($this);
                    }
                },
                error: function () {
                    alert("点赞失败！")
                }
            });
        });
        //发送评论
        $("#commentBtn").click(function () {
            let content = $("#comment").val();
            if (content == '') {
                alert("评论内容不能为空！");
                return;
            }
            $.ajax({
                type: 'POST',
                contentType: "application/json;charset=UTF-8",
                url: '/front/article/pushComment',
                dataType: 'json',
                data: JSON.stringify({
                    articleId: article.id,
                    content: content
                }),
                success: function (data) {
                    if (data.code = '0') {
                        initComment();
                    }
                },
                error: function () {
                    alert("评论失败！")
                }
            });
        });
    });

    //填充文章
    function putArticle() {
        if (article.content) {
            $("#mdText").text(article.content);
            var acticleView = editormd.markdownToHTML("acticleView", {
                markdown: article.content,//+ "\r\n" + $("#append-test").text(),
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                tocm: true,    // Using [TOCM]
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            });
        } else {
            $('.article-content').html('');
            var error = $('<div class="article"><div class="zhy-article-top"><div class="error">' +
                '<img src="/static/img/register_success.gif">' +
                '<p>没有找到这篇文章哦</p>' +
                '<p>可能不小心被博主手残删掉了吧</p>' +
                '<div class="row">' +
                '<a href="/">返回首页</a>' +
                '</div>' +
                '</div></div></div>');
            $('.article-content').append(error);
        }
    }

    //填充标签
    function putArticletTags() {
        var tagStr = article.articleTags;
        if (tagStr.length > 0) {
            var tags = $('<div class="tags"></div>');
            var tagList = tagStr.split(",");
            for (var i = 0; i < tagList.length; i++) {
                //todo 缺少接口
                var tag = $('<i class="am-icon-tag"></i><a class="articleTagColor" href="/tags?tag=' + tagList[i] + '"> ' + tagList[i] + '</a>');
                tags.append(tag);
            }
            $('.article-tags').append(tags);
        }
    }

    //填充分享
    function putLikeBtn() {
        var likeBtn = $('<div class="likeBtn am-btn am-btn-danger">' +
            '<div class="likeHeart">' +
            '<i class="am-icon-heart-o">&nbsp;&nbsp;喜欢</i>' +
            '</div>' +
            '<div class="likesNum">' +
            '<span> ' + article.likesNum + '</span>' +
            '</div>' + '</div>');
        $('.other').append(likeBtn);

        if (article.isLiked >= 1) {
            $('.likeBtn').css({
                "background-color": "#EA6F5A",
                "color": "white"
            });
            $('.likesNum').css({
                "border-left": "1px solid white"
            });
            $('.likeHeart').find('i').removeClass("am-icon-heart-o");
            $('.likeHeart').find('i').addClass("am-icon-heart");
        }

        $('.other').append($('<div class="social-share" data-initialized="true" data-url=""  data-title="">' +
            '<a href="#" class="social-share-icon icon-qq" data-am-popover="{content: \'分享至QQ好友\', trigger: \'hover focus\'}"></a>' +
            '<a href="#" class="social-share-icon icon-qzone" data-am-popover="{content: \'分享至QQ空间\', trigger: \'hover focus\'}"></a>' +
            '<a href="#" class="social-share-icon icon-wechat"></a>' +
            '<a href="#" class="social-share-icon icon-weibo" data-am-popover="{content: \'分享至微博\', trigger: \'hover focus\'}"></a>' +
            '</div>'))
    }

    //点赞喜欢效果
    function niceIn(prop) {
        prop.find('i').addClass('niceIn');
        setTimeout(function () {
            prop.find('i').removeClass('niceIn');
        }, 1000);
    }
    //图片放大
    function putImg() {
        //选中所有需放大的图片加上data-src属性
        $("#acticleView img").each(function(index){
            if(!$(this).hasClass("emoji")){
                var a=$(this).attr('src');
                $(this).attr("data-original",a);
            }
        });

        $('#acticleView').viewer({
            url: 'data-original',
        });

    }

    function initComment() {
        //填充文章评论
        $.ajax({
            type: 'get',
            url: '/front/article/selectCommentList',
            dataType: 'json',
            data: {
                articleId: article.id
            },
            success: function (data) {
                if (data.code == 0) {
                    putComment(data.data);
                }
            }
        });
    }

    //填充文章评论
    function putComment(data) {
        $('#comment').val('');
        var comment = $('.comment');
        var commentBottom = $('.comment-bottom');
        commentBottom.html('');

        if (data.length == 0) {
            let comments = $('<div class="comments">' +
                '<span class="noComment" style="color: black">还没有评论，快来抢沙发吧！</span>' +
                '</div>');
            commentBottom.append(comments);
            comment.append(commentBottom);
        } else {
            let articleComment = $('<div class="article-comment"></div>');
            let articleCommentTop = $('<div class="article-comment-top">' +
                '<span class="article-comment-word">评论</span>' +
                '<div class="article-comment-line"></div>' +
                '</div>');
            let newComment = $('<div class="new-comment">' +
                '<i class="all-comment am-icon-ellipsis-v"></i>全部评论（<span class="commentNum">' + '' + '</span>）' +
                '</div>');
            articleComment.append(articleCommentTop);
            articleComment.append(newComment);
            let allComments = $('<div class="all-comments"></div>');

            $.each(data, function (index, obj) {
                var visitorReplies = $('<div class="visitorReplies"></div>');
                $.each(obj['chlidren'], function (index1, obj1) {
                    var visitorReply = $('<div id="p' + obj1['id'] + '" class="visitorReply"></div>');
                    var visitorReplyWords = $('<div class="visitorReplyWords"><a class="visitorId">' + obj1['userId'] + '</a>' +
                        '<a class="visitorName">' + obj1['userName'] + '</a>： <a class="replyName">@' + obj1['replyName'] + ' </a>' + obj1['content'] +
                        '</div>');
                    var visitorReplyTime = $('<div class="visitorReplyTime">' +
                        '<span class="visitorReplyTimeTime">' + obj1['createTime'] + '</span>' +
                        '<a>' +
                        '<i class="replyReply am-icon-comment-o">&nbsp;&nbsp;回复</i>' +
                        '</a>' +
                        '</div>');
                    visitorReply.append(visitorReplyWords);
                    visitorReply.append(visitorReplyTime);
                    visitorReply.append($('<hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>'));
                    visitorReplies.append(visitorReply);
                });
                var subCommentList = $('<div class="sub-comment-list"></div>');
                var moreComment = $('<div class="more-comment">' +
                    '<a>' +
                    '<i class="moreComment am-icon-edit"> 添加新评论</i>' +
                    '</a>' +
                    '</div>');
                subCommentList.append(visitorReplies);
                subCommentList.append(moreComment);
                var subComment = $('<div class="sub-comment"></div>');
                if (obj['chlidren'].length != 0) {
                    subComment.append(subCommentList);
                }
                subComment.append($('<div class="reply-sub-comment-list am-animation-slide-bottom">' +
                    '<div class="replyWord">' +
                    '<div class="replyWordBtn">' +
                    '<textarea class="replyWordTextarea" placeholder="写下你的评论..."></textarea>' +
                    '<button type="button" class="sendReplyWordBtn am-btn am-btn-success">发送</button>' +
                    '<button type="button" class="quitReplyWordBtn am-btn">取消</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>'));

                var amG = $('<div class="am-g"></div>');
                amG.append($('<div class="visitorCommentImg am-u-sm-2 am-u-lg-1">' +
                    '<img src="' + (obj['avatar'] == '' ? '/img/profile.jpg' : obj['avatar']) + '">' +
                    '</div>'));
                var amUSm10 = $('<div class="am-u-sm-10 am-u-lg-11"></div>');
                var visitorInfo = $('<div class="visitorInfo">' +
                    '<span class="visitorFloor">#' + (data.length - index) + '楼</span>' +
                    '<span class="visitorId">' + obj['userId'] + '</span>' +
                    '<span class="visitorName">' + obj['userName'] + '</span>' +
                    '<span class="visitorPublishDate">' + obj['createTime'] + '</span>' +
                    '</div>');
                var visitorSay = $('<div class="visitorSay">' +
                    obj['content'] +
                    '</div>');
                var toolGroup1 = $('<div class="tool-group">' +
                    '<a>' +
                    '<i class="like am-icon-thumbs-o-up">&nbsp;&nbsp;<span>' + obj['likeNum'] + '</span>人赞</i>' +
                    '</a>' +
                    '<a>' +
                    '<i class="reply am-icon-comment-o">&nbsp;&nbsp;回复</i>' +
                    '</a>' +
                    '</div>');
                var toolGroup2 = $('<div class="tool-group">' +
                    '<a>' +
                    '<i class="like am-icon-thumbs-up text-success">&nbsp;&nbsp;<span>' + obj['likeNum'] + '</span>人赞</i>' +
                    '</a>' +
                    '<a>' +
                    '<i class="reply am-icon-comment-o">&nbsp;&nbsp;回复</i>' +
                    '</a>' +
                    '</div>');
                amUSm10.append(visitorInfo);
                amUSm10.append(visitorSay);
                if (obj['isLike'] > 0) {
                    amUSm10.append(toolGroup2);
                } else {
                    amUSm10.append(toolGroup1);
                }
                amUSm10.append(subComment);
                amG.append(amUSm10);
                var visitorComment = $('<div class="visitorComment" id="p' + obj['id'] + '"></div>');
                visitorComment.append(amG);
                visitorComment.append($('<hr>'));
                allComments.append(visitorComment);
            });
            articleComment.append(allComments);
            commentBottom.append(articleComment);
            comment.append(commentBottom);
            //添加评论数
            $('.commentNum').html(data.length);
        }


        var reply = $('.reply');
        var quitReplyWordBtn = $('.quitReplyWordBtn');
        var moreComment = $('.moreComment');
        var replyReply = $('.replyReply');

        var replyId;
        var replyName;
        //点击回复显示评论框
        reply.click(function () {
            var $this = $(this);

            $this.parent().parent().parent().find($('.reply-sub-comment-list')).find($('.replyWordTextarea')).val('');
            $this.parent().parent().parent().find($('.reply-sub-comment-list')).css("display", "block");
            $this.parent().parent().parent().find($('.reply-sub-comment-list')).find($('.replyWordTextarea')).focus();

            replyId = $this.parent().parent().prev().prev().find('.visitorId').html();
            replyName = $this.parent().parent().prev().prev().find('.visitorName').html();

        });

        //添加新评论显示评论框
        moreComment.click(function () {
            var $this = $(this);
            $this.parent().parent().parent().next().find($('.replyWordTextarea')).val('');
            $this.parent().parent().parent().next().css("display", "block");
            $this.parent().parent().parent().next().find($('.replyWordTextarea')).focus();

            replyId = $this.parent().parent().parent().parent().parent().find('.visitorInfo').find('.visitorId').html();
            replyName = $this.parent().parent().parent().parent().parent().find('.visitorInfo').find('.visitorName').html();

        });

        //评论中的回复的回复按钮显示评论框
        replyReply.click(function () {
            var $this = $(this);
            replyId = $this.parent().parent().prev().find($('.visitorId')).html();
            replyName = $this.parent().parent().prev().find($('.visitorName')).html();
            $this.parent().parent().parent().parent().parent().next().css("display", "block");
            $this.parent().parent().parent().parent().parent().next().find($('.replyWordTextarea')).val('@' + replyName + ' ');
            $this.parent().parent().parent().parent().parent().next().find($('.replyWordTextarea')).focus();
        });

        //点击取消隐藏评论框
        quitReplyWordBtn.click(function () {
            $(this).parent().parent().find($('.replyWordTextarea')).val('');
            $(this).parent().parent().parent().css("display", "none");
        });

        //发送评论中的回复
        $('.sendReplyWordBtn').click(function () {
            var $this = $(this);
            var content = $this.parent().parent().find($('.replyWordTextarea')).val();
            if (content.substring(0, 1) == '@') {
                let idx = content.indexOf(' ');
                content = content.substring(idx);
            }

            var pId = $this.parent().parent().parent().parent().parent().parent().parent().attr("id");
            if (content == "") {
                alert("我没看清你要回复啥吖！");
            } else {
                $.ajax({
                    type: 'POST',
                    contentType: "application/json;charset=UTF-8",
                    url: '/front/article/pushComment',
                    dataType: 'json',
                    data: JSON.stringify({
                        pid: pId.substring(1),
                        articleId: article.id,
                        content: content,
                        replyId: replyId,
                        replyName: replyName
                    }),
                    success: function (data) {
                        if (data['code'] == 0) {
                            var sub_comment = $this.parent().parent().parent().parent();
                            var visitorReply = $('<div id=p' + data['data']['id'] + ' class="visitorReply"></div>');
                            var visitorReplyWords = $('<div class="visitorReplyWords"><a class="visitorId">' + data['data']['userId'] + '</a>' +
                                '<a class="visitorName">' + data['data']['userName'] + '</a>： <a class="replyName">@' + data['data']['replyName'] + ' </a>' + data['data']['content'] + '' +
                                '</div>');
                            var visitorReplyTime = $('<div class="visitorReplyTime">' +
                                '<span class="visitorReplyTimeTime">' + data['data']['createTime'] + '</span>' +
                                '<a>' +
                                '<i class="replyReply am-icon-comment-o">&nbsp;&nbsp;回复</i>' +
                                '</a>' +
                                '</div>');
                            visitorReply.append(visitorReplyWords);
                            visitorReply.append(visitorReplyTime);
                            visitorReply.append('<hr data-am-widget="divider" style="" class="am-divider am-divider-dashed" />');

                            if (sub_comment.find('.sub-comment-list').length > 0) {
                                sub_comment.find('.visitorReplies').append(visitorReply);
                            } else {
                                var visitorReplies = $('<div class="visitorReplies"></div>');
                                var sub_comment_list = $('<div class="sub-comment-list"></div>');
                                visitorReplies.append(visitorReply);
                                sub_comment_list.append(visitorReplies);
                                sub_comment_list.append($('<div class="more-comment">' +
                                    ' <a>' +
                                    '<i class="moreComment am-icon-edit"> 添加新评论</i>' +
                                    '</a>' +
                                    '</div>'));
                                sub_comment.prepend(sub_comment_list);
                            }

                            //给新加入的评论中的回复和下面的添加新评论添加点击事件
                            $this.parent().parent().parent().parent().find('.visitorReplies>div:last-child').find('.replyReply ').click(function () {
                                visitorId = $(this).parent().parent().prev().find($('.visitorId')).html();
                                replyName = $(this).parent().parent().prev().find($('.visitorName')).html();

                                $(this).parent().parent().parent().parent().parent().next().css("display", "block");
                                $(this).parent().parent().parent().parent().parent().next().find($('.replyWordTextarea')).val('@' + replyName + ' ');
                                $(this).parent().parent().parent().parent().parent().next().find($('.replyWordTextarea')).focus();
                            });
                            $this.parent().parent().parent().parent().find('.sub-comment-list').find('.more-comment').find('.moreComment').click(function () {
                                $(this).parent().parent().parent().next().find($('.replyWordTextarea')).val('');
                                $(this).parent().parent().parent().next().css("display", "block");

                                visitorId = $(this).parent().parent().parent().parent().parent().find('.visitorInfo').find('.visitorId').html();
                                replyName = $(this).parent().parent().parent().parent().parent().find('.visitorInfo').find('.visitorName').html();
                            });
                            $this.parent().find($('.replyWordTextarea')).val('');
                            $this.parent().parent().parent().css("display", "none");
                        }
                    },
                    error: function () {
                        alert("回复失败！");
                    }
                });
            }

        });

        //点击评论中的点赞
        $('.like').click(function () {
            var $this = $(this);
            var commentId = $this.parent().parent().parent().parent().parent().attr("id");
            $.ajax({
                type: 'POST',
                contentType: "application/json;charset=UTF-8",
                url: '/front/article/insertCommentLike',
                dataType: 'json',
                data: JSON.stringify({
                    commentId: commentId.substring(1)
                }),
                success: function (data) {
                    if (data['code'] == 0) {
                        let num = $this.find('span').html();
                        $this.find('span').html(Number(num)+1);
                        $.tipsBox({
                            obj: $this,
                            str: "+1",
                            callback: function () {
                            }
                        });
                        niceIn($this);
                        $this.removeClass("fa-thumbs-o-up");
                        $this.addClass("fa-thumbs-up");
                        $this.addClass("text-danger");
                    }
                },
                error: function () {
                    alert("点赞失败！")
                }
            });
        });
    }

    // 文章点赞
    (function ($) {
        $.extend({
            tipsBox: function (options) {
                options = $.extend({
                    obj: null,  //jq对象，要在那个html标签上显示
                    str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
                    startSize: "12px",  //动画开始的文字大小
                    endSize: "30px",    //动画结束的文字大小
                    interval: 600,  //动画时间间隔
                    color: "red",    //文字颜色
                    callback: function () {
                    }    //回调函数
                }, options);
                $("body").append("<span class='num'>" + options.str + "</span>");
                var box = $(".num");
                var left = options.obj.offset().left + options.obj.width() / 2;
                var top = options.obj.offset().top - options.obj.height();
                box.css({
                    "position": "absolute",
                    "left": left + "px",
                    "top": top + "px",
                    "z-index": 9999,
                    "font-size": options.startSize,
                    "line-height": options.endSize,
                    "color": options.color
                });
                box.animate({
                    "font-size": options.endSize,
                    "opacity": "0",
                    "top": top - parseInt(options.endSize) + "px"
                }, options.interval, function () {
                    box.remove();
                    options.callback();
                });
            }
        });
    })(jQuery);
</script>
</body>
</html>
